<template>
	<view class="kuang">
		<image class="bj" src="/static/图层 1@3x.png" mode=""></image>
		<text class="title">评价管理</text>
	</view>
	<view class="jiantou" @click="goBack"></view>

	<view class="list-wrap">
		<view class="card" v-for="item in evaluations" :key="item.id">
			<view class="card-hd">
				<text class="name">{{ item.userName }}</text>
				<button class="detail-btn" @click.stop="goDetail(item)">查看详情</button>
			</view>
			<view class="divider"></view>
			<view class="row">
				<text class="label">订单编号：</text>
				<text class="order" @click.stop="goDetail(item)">{{ item.orderNo }}</text>
			</view>
			<view class="row star-row">
				<text class="label">综合评分：</text>
				<text class="score">{{ item.score }}分</text>
				<uni-rate :value="item.score" readonly size="18" color="#E0E0E0" active-color="#FFD54F"/>
			</view>
			<view class="row time-row">
				<text class="label">评价时间：</text>
				<text class="time">{{ item.time }}</text>
			</view>
		</view>

		<!-- 第二条示例 -->
		<view class="card">
			<view class="card-hd">
				<text class="name">张女士</text>
				<button class="detail-btn" @click.stop="goDetail()">查看详情</button>
			</view>
			<view class="divider"></view>
			<view class="row">
				<text class="label">订单编号：</text>
				<text class="order" @click.stop="goDetail()">2021010831213</text>
			</view>
			<view class="row star-row">
				<text class="label">综合评分：</text>
				<text class="score">3分</text>
				<uni-rate :value="3" readonly size="18" color="#E0E0E0" active-color="#FFD54F"/>
			</view>
			<view class="row time-row">
				<text class="label">评价时间：</text>
				<text class="time">2023-03-12 11:02</text>
			</view>
		</view>
	</view>

</template>

<script setup>
import { ref } from 'vue'
const evaluations = ref([
	{
		id: 1,
		userName: '张女士',
		orderNo: '2021010831213',
		score: 3,
		time: '2023-03-12 11:02'
	}
])

function goBack(){
	uni.navigateBack({ delta: 1 })
}

function goDetail(row){
	uni.navigateTo({ url: '/pages/evaluation/detail' })
}
</script>

<style scoped>
	.bj {
		position: absolute;
		z-index: 1;
		width: 750rpx;
		height: 430rpx;
	}

	.kuang {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 35rpx;
		position: absolute;
		z-index: 2;
		color: white;
		margin-top: 60rpx;
	}

	.jiantou {
		position: absolute;
		z-index: 2;
		width: 30rpx;
		height: 30rpx;
		border: 5rpx solid white;
		border-top: none;
		border-left: none;
		transform: rotate(135deg);
		margin-top: 60rpx;
		margin-left: 30rpx;
	}

	.list-wrap{
		position: absolute;
		z-index: 2;
		padding: 0 20rpx 40rpx;
		width: 100%;
		box-sizing: border-box;
		margin-top: 200rpx;
	}
	.card{
		background: #ffffff;
		border-radius: 24rpx;
		margin-bottom: 24rpx;
		padding: 28rpx 24rpx;
		box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.04);
	}
	.card-hd{display:flex;align-items:center;position:relative}
	.name{font-size:30rpx;color:#111111}
	.detail-btn{position:absolute;right:24rpx;background:#057AFF;color:#fff;border-radius:999rpx;font-size:26rpx;line-height:64rpx;height:64rpx;padding:0 28rpx}
	.divider{height:2rpx;background:#F2F2F2;margin:20rpx 0}
	.row{display:flex;align-items:center;margin:8rpx 0}
	.label{color:#6b6b6b;font-size:26rpx}
	.order{color:#1677ff;font-size:26rpx}
	.score{margin-right:12rpx;color:#111111}
	.star-row uni-rate{margin-left:8rpx}
	.time-row .time{color:#6b6b6b}

</style>